什麼是 NPM ?
想像這個情境,當我們完成Sass檔案後,瀏覽器沒有辦法直接閱讀Sass檔,所以我們需要先編易它,編譯的方式有很多種,其中一種是使用 Gulp 來即時編譯Sass 。 而 Gulp 就是 NPM 中的一個包裹。
NPM 全名是 Node Package Manager,它是 node.js 預設的 node套件管理平台,運用NPM我們可以更方便的進行套件管理(安裝、升級與刪除)。
Node.js 和 NPM 的關係 ?
Node.js 由 是JavaScript編寫。它的優點是可以讓 前後端語言統一開發,來提升效率及便利性。
Node.js可以把它想成是「能在後端運作的 JavaScript」。
我們平常在寫得JavaScript是寫給瀏覽器去執行的。而Node.js是在我們伺服器端的環境運行。
而 NPM 就是 Node.js 中的其中一個功能,它是Node.js所提供的 node套件管理平台。
所以 Node.js的套件被稱為 NPM Package。
透過NPM,我們可以在node線上套件庫,下載各式各樣的JavaScript套件。
Node.js 內有很多套件, 包含我們常用的 Gulp、webPack、Vue、React 等 檔案大小從大至小都有。
我們使用Node.js的服務,用NPM做套件管理
(Node.js 和 NPM 有點綁在一起的感覺,會同時安裝)
下載完成後,可以於終端機輸入: npm -v
node -v
來看下載是否成功(會顯示download version)
Package.json 是甚麼?
下載完 NPM 和 Node.js 後,在專案什麼都沒有時,會先將專案初始化,這時候進入你的編輯器輸入 npm init
。
初始化會需要你提供專案資訊並且在完成後建立 Package.json 的檔案。 這個檔案可以幫你紀錄你在這個專案中所使用的所有套件(名稱、Version..),當多人要一起維護或製作網站時,當他們下載檔案後執行 npm install
,可以直接將Package.json
檔案內的所有專案中使用的套件一起載入。
通常你會看到 package-lock.json
,它其實和Package.json
一樣,只是因為套件會有更新版本,在每次下載時都會自動下載最新的,但是有時候地更新會導致專案上版本不合等等問題,所以package-lock.json
會保證讓別人下載時,下載原本專案使用的相同版本。
載入NPM流程:
- 下載
NPM
和Node.js
初始化-需要寫入專案資訊(會建立
Package.json
)
|--package name:專案名稱 (只能是小寫英文)
|--version:專案版本 (預設會是 1.0.0)
|--description:專案描述
|--entry point:專案進入點
|--test command
|--git repository
|--keyword
|--author
|--License
如果不知道要打什麼沒關係,基本上只要一直enter就好。
完成後就會在目錄看到Package.json
檔案。點進去就會看到剛剛填寫的專案資料。開始下載各種套件
如何下載 NPM 套件?
下載了 NPM 和 Node.js 並初始化完成後,你可以開始載入 NPM Package。
載入 NPM Package 的方式有兩種:
- Global Install
npm install -g 套件名稱
- Local Install
npm install 套件名稱
這兩個的不同在於,Local Install 是在你的專案裡面載入,你所載入的套件只能在這個專案中使用。而Global Install 也就是相反的意思啦!
一個Global Install 的例子就是: Gulp Cli
。
Gulp Cli
讓你在每次進入不同專案後 輸入 Gulp
就可以開始執行。
這就是一個典型的 Global Install。
延伸閱讀: 什麼是Cli?
下載套件後要將它更新到 Package.json
,所以要再輸入 npm install 套件名稱 --save
有些人會習慣將所有需要套件與版本先寫好在Package.json
,再利用執行來下載。
需要下載那些 NPM 套件?
這取決於你要做的專案,如果你要使用Vue.js,你就需要下載 Vue套件、WebPack套件等,如果你使用Sass,就需要使用Gulp來編譯。
Package-lock.json細節介紹
以下載 gulp
套件為例子
開始下載套件後,你會發現多了一個Package-lock.json
。
點進去你會看到有很多資料。
點進Package.json
你也會發現,比最剛開始在 dependencies裡多了 gulp 和版本
dependencie 是 相依性套件 的意思。
Package.json
就是你的這個專案所相依(使用)的套件。
而因為 不同的套件 可能又是相依了某些其他的套件產生,所以你才會看到在node_module裡面有好多好多東西。
Package-lock.json
也就是又在列出每個套件所相依的套件。
node_module內的東西就是所有載入的node套件
你可以使用 npm list
來看所有載入的套件與版本
更新套件 - 關於版本的小知識
直接更新到最新版本 npm update
為什麼要了解版本?
很多套件都是由不同的套件組成,套件都有可能會更新,每次在下載時,Node.js會自動下載最新的套件版本,但是套件版本有時候的更新會影響整個專案,可能會導致專案出現問題,所以要了解版本來確保更新的正確又安全。
關於版本
版本的寫法通常是由三組數字組成,例如: 5.0.0 / 1.11.22 。
這三個數字分別代表甚麼呢?
- 第一組數字: Major version
- 第二組數字: Minor version
- 第三組數字: Patch version
第一組數字用在當更新有很大的改變時並且跟以往的無法兼容時,第一組數字變更時要非常小心,因為可能一更新你的專案就會掛掉QQ(當第一組數字變更時,後面兩組數字會歸零)
第二組數字用在當更新是可以兼容的一些功能,理論上不會影響到使用舊版本的專案。
第三組數字用在當更新只是在修除一些小bug,不會影響任何使用舊版本的專案。
前面有提到版本更新時,因為可能導致問題所以有了Package-lock.json
。
其實在Package.json
內也有這樣的設置,但是沒有到那麼極致(完全相同版本)。
在前面Package.json
的圖片中,顯示版本的最前面會看到 ^
的符號,這個符號是在告訴node.js在下載時,如果最新版本的Major(第一組數字)更新,就不會下在那個最新版本。
例如: ^4.1.1
如果最新更新為 ^4.2.2
會一樣更新。但若更新為^5.0.0
就不會更新為這個版本。
若你想要完全維持一模一樣的版本,就可以有Package-lock.json
。
那如果我是想要更新到最新版本或指定版本呢?
你可以
- 輸入
npm install 套件@lastest
- 直接指明要哪個major版本
npm install 套件@版本(major)數字
,這個會直接更新到此major的最新版本。 - 直接指明要更新到哪個minor版本
npm install 套件@版本數字(major.minor)
刪除套件
使用語法 npm uninstall 套件名稱
但要注意,這樣並更新 package.json !!!!
需要再下
npm uninstall 套件名稱 --save
這樣才能也一起更新 package.json 的資訊